<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            @if (courseId) {
                <h1>{{ 'core.search' | translate }}</h1>
            } @else {
                <h1>{{ 'core.search.globalsearch' | translate }}</h1>
            }
        </ion-title>
        <ion-buttons slot="end">
            <core-user-menu-button />
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content class="limited-width">
    <div>
        @if (searchBanner) {
            <ion-card class="core-danger-card">
                <ion-item>
                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                    <ion-label>
                        <core-format-text [text]="searchBanner" />
                    </ion-label>
                </ion-item>
            </ion-card>
        }

        <core-search-box (searchTextChange)="search($event)" [autoFocus]="true" searchArea="CoreSearchGlobalSearch"
            [searchText]="searchText"/>

        @if (resultsSource.isLoaded()) {
            <ion-list>
                <core-search-global-search-result *ngFor="let result of resultsSource.getItems()" [result]="result"
                    (onClick)="visitResult(result)" />
            </ion-list>
        }

        <core-infinite-loading [enabled]="resultsSource.isLoaded() && !resultsSource.isCompleted()" (action)="loadMoreResults($event)"
            [error]="loadMoreError" />

        @if (resultsSource.isEmpty()) {
            <core-empty-box icon="fas-magnifying-glass" [dimmed]="!resultsSource.isLoaded()">
                @if (!resultsSource.isLoaded()) {
                    <p role="alert">{{ 'core.search.empty' | translate }}</p>
                } @else {
                    <p><strong>{{ 'core.search.noresults' | translate: { $a: resultsSource.getQuery() } }}</strong></p>
                    <p><small>{{ 'core.search.noresultshelp' | translate }}</small></p>
                }
            </core-empty-box>
        }

        <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end">
            <ion-fab-button (click)="openFilters()" [attr.aria-label]="'core.filter' | translate">
                <ion-icon name="fas-filter" aria-hidden="true" />
            </ion-fab-button>
        </ion-fab>
    </div>
</ion-content>
